<!-- 教学楼 -->
<template>
  <view>
    <view class="kjhnderr pd pm20">
      <view class="drrttser row fz26 pd">
        <view class="col pr">
          <icon type="search" size="16" class="kkjsert cz"></icon>
          <input placeholder="课室号" class="sdfsdtyee" v-model="ksNumber" @change="ksChange"/>
        </view>
        <view class="ls dfgtye">
          <picker mode="date" @change="dertrety">
            <view>{{ uuhe ? uuhe : "年/月/日" }}</view>
          </picker>
        </view>
      </view>
    </view>

    <view class="pt20 bgff">
      <scroll-view scroll-x="true" class="tag">
        <view
          class="fgdfgfytyu pm10"
          v-for="sd in floorNums"
          :class="curFloor == sd ? 'act' : ''"
          @tap="changeFloor(sd)"
          >{{ sd }}</view
        >
      </scroll-view>
    </view>
    <swiper
      :current="ideer"
      class="dsfdrttye"
      :style="{ height: hgjhgs + 'px' }"
      @change="hhvbvgse"
    >
      <swiper-item v-for="sd in floorNums">
        <scroll-view scroll-y="true" class="jhnxeeert h100">
          <view class="hb">
            <image :src="hb" class="w100 hb-img"></image>
          </view>
          <view>
            <view class="text-wrap">
              <text class="text-gray">课室状态详情</text>
              <text class="green-circle"></text
              ><text class="text-green">空闲</text
              ><text class="text-red"
                ><text class="red-circle"></text>已占</text
              >
            </view>
          </view>
          <uni-collapse v-for="item in fieldInfoList">
            <uni-collapse-item :title="item.name" :thumb="thumb">
              <uni-collapse>
                <uni-collapse-item
                  v-for="shijianduan in timeList"
                  :title="
                    shijianduan.name +
                    '(' +
                    shijianduan.startTime +
                    '-' +
                    shijianduan.endTime +
                    ')'
                  "
                  thumb="../../static/img/gfdgfdga.png"
                  :jhghgs="
                    item.fieldStatusList.filter((j) => {
                      return j.startTime == shijianduan.startTime;
                    }).length
                  "
                  @click="showWX(item, shijianduan, item.fieldStatusList.filter((j) => {
                      return j.startTime == shijianduan.startTime;
                    }).length)"
                ></uni-collapse-item>
                <view class="device fax-start">
                  <view class="name fx-center">
                    <image class="sheb" :src="shebei" mode="" />
                    <view class="txt">设备：</view>
                  </view>
                  <view class="detail fxv-center">
                    <view class="dev-info fx-center">
                      <view
                        class="des-item"
                        v-for="equip in item.equipmentList"
                      >
                        <div class="name-txt">{{ equip.name }}：</div>
                        {{ equip.amount }}
                      </view>
                    </view>
                  </view>
                </view>
              </uni-collapse>
            </uni-collapse-item>
          </uni-collapse>
        </scroll-view>
      </swiper-item>
    </swiper>
    <navigator
      class="kjnmxeeretr fz32"
      :url="'/pages/index/classroom?fieldId=' + fieldId"
    >
      获取人数
    </navigator>

    <uni-popup class="building-popup" ref="popup" type="center">
      <view class="fxv-start">
        <view class="title fx-start">
          <view class="title-txt">被申请：</view>
          <view class="title-con">{{ wxInfo.unityName }}</view>
        </view>
        <view class="title fx-start">
          <view class="title-txt">详情：</view>
          <view class="title-con">
            <view class="tc-item">举办活动</view>
            <view class="tc-item">{{ wxInfo.activityContent }}</view>
          </view>
        </view>
        <view class="con">
          <image
            class="wx-image"
            :src="basicURL + wxInfo.activityImg"
            mode=""
          /> </view
      ></view>
    </uni-popup>
  </view>
</template>
<script>
import store from "../../store/index.js";
export default {
  data() {
    return {
      basicURL: "https://www.waibizi.com/",
      ideer: 0,
      uuhe: "2020-05-06",
      hgjhgs: 0,
      curFloor: 3,
      thumb: require("../../static/img/dianano.png"),
      hb: "",
      wx: require("../../static/img/wx.jpg"),
      shebei: require("../../static/img/sb.jpg"),
      fieldId: 1,
      fieldInfoList: [],
      floorNums: [],
      timeList: [],
      wxInfo: {},
      ksNumber:''
    };
  },
  methods: {
    changeFloor(floor) {
      this.curFloor = floor;
      this.fieldClassroom();
    },
    dertrety(e) {
      this.uuhe = e.detail.value;
      this.fieldClassroom();
    },
    hhvbvgse(e) {
      this.changeFloor(e.detail.current);
    },
    showWX(item, sitem, res) {
      if(!res) return
      this.wxInfo = item.fieldStatusList.filter((j) => {
        return j.startTime == sitem.startTime;
      })[0];
      
      this.$refs.popup.open();
    },
    async fieldClassroom() {
      let that = this;
      let res = await this.$api.fieldClassroom({
        fieldTypeId: this.fieldId,
        paramDate: this.uuhe,
        curFloor: this.curFloor,
      });
      if (res.code == 200) {
     
        that.fieldInfoList = res.data.fieldInfoList;
        that.hb = that.basicURL + res.data.imgAddress;
      }
    },

    ksChange () {
      if(this.ksNumber > 100) {
        this.changeFloor(Math.floor(this.ksNumber/100))
      } else {

      }
    },

    async getFloor() {
      let that = this;
      let res = await this.$api.getFloor({
        fieldTypeId: this.fieldId,
      });
      if (res.code == 200) {
        that.floorNums = res.data.floorNums;
        if (that.floorNums.length) {
          that.curFloor = that.floorNums[0];
        }
      }
    },

    async getTime() {
      let res = await this.$api.fieldTypeTime(this.fieldId);
      if (res.code == 200) {
        this.timeList = res.data;
      }
    },
  },
  mounted() {
    var date = new Date();
    this.uuhe =
      date.getFullYear() +
      "-" +
      (date.getMonth() + 1) +
      "-" +
      parseInt(date.getDate());
    this.basicURL = store.getters.getBasicURL;
    this.hgjhgs = uni.getSystemInfoSync().windowHeight - 95;
    this.fieldId = this.pageQuery.id || 1;
    this.getFloor().then(() => {
      this.fieldClassroom();
    });

    this.getTime();
  },
};
</script>
<style lang="less" scoped>
@import "../../static/less/flex.less";
.hb,
.hb-img {
  height: 300upx;
}

.fgdfgfytyu {
  display: inline-block;
  width: 100upx;
  text-align: center;
  line-height: 60upx;
  font-size: 32upx;
  position: relative;

  &.act {
    color: #3dadeb;

    &:after {
      :after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0upx;
        height: 4upx;
        width: 100%;
        background: #3dadeb;
      }
    }
  }
}

.tag {
  white-space: nowrap;
}

.dsfdrttye {
  height: 100%;
}

.device {
  width: 100%;
  padding: 20upx 30upx;

  .sheb {
    width: 40upx;
    height: 40upx;
    >img {
      opacity: 1;
      width: 100%;
      height: 100%;
    }
  }

  .name {
    width: 200upx;
    display: inline-block;
    font-size: 34upx;

    .txt {
      margin: 0 20upx;
      display: inline-block;
    }
  }

  .detail {
    display: inline-block;
  }

  .dev-info {
    line-height: 50upx;
    font-size: 28upx;

    .des-item {
      width: 200upx;
      color: #666;

      .name-txt {
        display: inline-block;
        width: 120upx;
      }
    }
  }
}

.building-popup {
  /deep/.uni-popup__wrapper-box {
    background: rgb(88, 135, 188);
    width: 600upx;
    height: 800upx;
    padding: 50upx;
  }

  .title {
    margin-bottom: 30upx;
    color: #fff;
    font-si-e: 36upx;

    .title-txt {
      width: 170upx;
    }

    .tc-item {
      line-height: 50upx;
    }
  }

  .con {
    margin: 40upx auto 0;
  }

  /deep/.wx-image {
    width: 440upx;
    height: 440upx !important;

    > img {
      position: static;
      opacity: 1;
      height: 440upx;
    }
  }
}
</style>
